<!-- 实名认证 -->
<template>
  <div class="realNameInfoPage">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container">
      <el-breadcrumb separator="/" class="titleBread">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/personal',query:{navBarIndex:1} }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>实名认证</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
      <img src="./../../../../../public/img/personal/realNameImg.png" class="realNameImg">
      </div>
      <div>
      <img src="./../../../../../public/img/personal/upImg.png" class="upImg" @click="upImgdata" v-if="!VideoUrl.id_card_front">
      <img :src="VideoUrl.id_card_front" class="upImg" @click="upImgdata" v-if="VideoUrl.id_card_front">
      <div class="upImgName">上传身份证人像面</div>
      </div>
      <div class="inputBox">
        <div class="inputNameBox">
          <span class="inputNameColor">真实姓名：</span>
          <input type="text" v-model="VideoUrl.name" placeholder="请输入姓名" class="inputName">
        </div>
        <div class="inputCardBox">
          <span class="inputNameColor">身份证号码</span>
          <input type="text" v-model="VideoUrl.number" placeholder="请输入身份证号码" class="inputCard">
        </div>
      </div>
      <div class="subMit" @click="getIdCardSubmit" v-if='VideoUrl.id_card_front'>
        <span>提交</span>
        <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
      </div>
    </div>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import {getIdCardSubmit,getFront} from './../../../../apis/api'
let inputElement = null;
export default {
// import引入的组件需要注入到对象中才能使用
components: {NavBarHeader},
  data() {
 // 这里存放数据
    return {
      VideoUrl: {}, //图纸或者现场图片
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  //上传图片
    upImgdata() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile1, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile1);
        }
        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
       // 上传图片
    uploadFile1(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        const files = el.target.files[0];
        const isLt10M = files.size / 1024 / 1024 < 2;
        const size = files.size / 1024 / 1024;
        // 判断上传文件的大小
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          // this.$dialog.toast({ mes: '请选择图片文件' });
          this.$message.error("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            // 数据传到后台
            const formData = new FormData();
            formData.append("file", files); // 可以传到后台的数据
            that.getFront(formData);
          };
        }
      }
    },
  // 上传
  async getFront(file){
    let res = await getFront(file)
    if(res.data.result == '1'){
      this.VideoUrl = res.data.body;
    }
    if(res.data.result == '100'){
      this.$message.error('请上传身份证人像面！')
      return
    }
     if(res.data.result == '101'){
      this.$message.error(res.data.message)
      return
    }
  },
  // 提交
    async getIdCardSubmit(){
    
    let data = {
      id_card_name:this.VideoUrl.name,
      id_card_front:this.VideoUrl.id_card_front,
      id_card_number:this.VideoUrl.number,
      id_card_sex:this.VideoUrl.sex,
      id_card_address:this.VideoUrl.address,
      id_card_birth:this.VideoUrl.birth,
      id_card_nationality:this.VideoUrl.nationality
    }
    let res = await getIdCardSubmit(data)
    if(res.data.result == '1'){
      this.$message.success('提交成功')
      setTimeout(()=>{
       this.$router.back(-1)
      },1500)
    }
    if(res.data.result == '102'){
      this.$message.error(res.data.message)
      return
    }
  },
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.navBarHeader{
  background: #1c1e2b;
  z-index: 1000;
}
.realNameInfoPage{
  background-color:#F0F2F5;
}
.container{
  width: 1180px;
  height: 100vh;
  background-color: #fff;
  padding-top: 90px;
  box-sizing: border-box;
  margin: 0 auto;
}
.titleBread{
  margin-left: 30px;
}
.realNameImg{
  width: 297px;
  height: 68px;
  margin-top: 34px;
  margin-left: 30px;
}
.upImg{
  width: 212px;
  height: 132px;
  margin-top: 40px;
  margin-left: 30px;
  cursor: pointer;
}
.upImgName{
  margin-top: 10px;
  margin-left: 80px;
  color: #666;
  font-size: 12px;
}
.inputBox{
  margin-top: 40px;
  margin-left: 30px;
}
.inputName{
  width: 676px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  margin-left: 45px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.inputCard{
  width: 676px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  margin-left: 45px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.inputNameColor{
  font-size: 14px;
  color: #999;
}
.inputNameBox{
  display: flex;
  align-items: center;
}
.inputCardBox{
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.subMit{
  width: 149px;
  height: 40px;
  background: linear-gradient(136deg, #FFB492 0%, #FF7D59 100%);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-left: 145px;
  cursor: pointer;
}
.rightIcon{
  margin-left: 10px;
  width: 37px;
  height: 11px;
}
</style>
